<template>
    <div class="layout center">
        <div class="left">
            <div class="left-top">
                <div class="title">ks3-js-sdk Demo</div>
                <div class="setting">
                    <Button type="primary" @click="showConfigDialog = true">
                        <Icon class="ion-android-settings"></Icon>
                        全局配置
                    </Button>
                </div>
                <Input placeholder="搜索API" v-model="searchApi" class="search" clearable stackClearIcon>
                <template slot="suffix">
                    <Icon class="Icon-search" />
                </template>
                </Input>
            </div>
            <div class="left-bottom">
                <div class="api-list">
                    <Menu theme="white" :selectedKey.sync="selectedApiName">
                        <MenuItem v-for="item in showApiList" :key="item.type">
                        {{ item.type }}
                        <Menu>
                            <MenuItem v-for="name in item.list" :key="name"> {{ name }}
                            </MenuItem>
                        </Menu>
                        </MenuItem>
                    </Menu>
                </div>
            </div>
        </div>
        <div class="mid">
            <div class="mid-top">
                <div class="selected-api-name">
                    {{ selectedApi.name }}
                </div>
                <div class="selected-api-info">
                    {{ selectedApi.info }}
                </div>
                <div>
                    <span class="must-params">只看必填参数 :</span>
                    <KSwitch v-model="must">
                    </KSwitch>
                </div>
                <div class="run-api">
                    <Button type="primary" @click="runApi">发起调用</Button>
                    <Button type="secondary" @click="abortApi" class="btn">取消调用</Button>
                    <Button @click="resetParamsForm" class="btn">重置表单</Button>
                </div>
            </div>
            <div class="mid-bottom">
                <Form :starOnRequired="true" ref="paramsForm" layout="vertical">
                    <FormItem :label="item.name" :value="selectedApi.paramsForm[item.name]"
                        :rules="selectedApi.rules[item.name]" v-for="(item, index) in selectedApi.params"
                        :key="selectedApi.name + index" v-show="(must ? item.required : true) && item.show">
                        <Tooltip :content="item.describe">
                            <Upload v-if="item.name === 'file'" ref="upload" :files="fileList"
                                :beforeUpload="beforeUpload" :beforeRemove="beforeRemove" action="#">
                                <Button type="primary">选取文件</Button>
                            </Upload>
                            <Input v-else-if="item.name === 'policy'" type="textarea" :placeholder="item.tip"
                                v-model="selectedApi.paramsForm[item.name]" rows="4">
                            </Input>
                            <Input v-else :placeholder="item.tip" v-model="selectedApi.paramsForm[item.name]">
                            </Input>
                        </Tooltip>
                    </FormItem>
                </Form>
                <div class="no-must-params" v-if="!needParams">无需要填写的参数</div>
            </div>
        </div>
        <div class="right">
            <Tabs v-model="rightTab" size="large">
                <Tab value="result">
                    调用结果
                </Tab>
                <Tab value="document">
                    参数说明
                </Tab>
                <Tab value="record">
                    调用记录
                </Tab>
            </Tabs>
            <div class="content">
                <div v-show="rightTab === 'result'" class="result-box">
                    <div class="result" v-show="resultState === 'result'">
                        <div class="result-title">API调用结果概览</div>
                        <div class="result-tip-success" v-show="resultInfo.resultFlag === 'success'">
                            <span class="result-tip-color"></span>
                            <span class="result-tip-text">调用成功!</span>
                            <Icon class="ion-checkmark-circled"></Icon>
                            <span class="result-tip-method">请求方式:{{ selectedApi.method }}</span>
                            <span class="result-tip-time">总耗时:{{ resultInfo.apiRunTime }}ms</span>
                            <span class="result-tip-code">状态码:{{ resultInfo.resultCode }}</span>
                        </div>
                        <div class="result-tip-fail" v-show="resultInfo.resultFlag === 'fail'">
                            <span class="result-tip-color"></span>
                            <span class="result-tip-text">调用失败!</span>
                            <Icon class="ion-close-circled"></Icon>
                            <span class="result-tip-method">请求方式:{{ selectedApi.method }}</span>
                            <span class="result-tip-time">总耗时:{{ resultInfo.apiRunTime }}ms</span>
                            <span class="result-tip-code">状态码:{{ resultInfo.resultCode }}</span>
                        </div>
                        <div class="result-tip-success" v-show="resultInfo.resultFlag === 'url'">
                            <span class="result-tip-color"></span>
                            <span class="result-tip-text">调用成功!</span>
                            <Icon class="ion-checkmark-circled"></Icon>
                            <span class="result-tip-method">请求方式:未请求</span>
                            <span class="result-tip-time">总耗时:{{ resultInfo.apiRunTime }}ms</span>
                            <span class="result-tip-code">状态码:无</span>
                        </div>
                        <div class="result-res">响应结果</div>
                        <div class="response">
                            <Tabs type="border-card" size="large" v-model="responseTab">
                                <Tab value="headers" v-if="resultInfo.resultFlag !== 'url'">响应头</Tab>
                                <Tab value="body" v-if="resultInfo.resultFlag === 'success'">响应体</Tab>
                                <Tab value="error" v-if="resultInfo.resultFlag === 'fail'">错误信息</Tab>
                                <Tab value="url" v-if="resultInfo.resultFlag === 'url'">URL结果</Tab>
                            </Tabs>
                            <div class="response-data">
                                <pre class="headers" v-if="responseTab === 'headers'">{{ responseHeaders }}</pre>
                                <pre class="body" v-if="responseTab === 'body'">{{ responseBody }}</pre>
                                <pre class="error" v-if="responseTab === 'error'">{{ responseError }}</pre>
                                <pre class="url" v-if="responseTab === 'url'">{{ responseUrl }}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="no-result" v-show="resultState === 'noResult'">
                        <div class="title">暂无调用结果</div>
                        <div class="info">点击下方的“发起调用”按钮，可以获取调用结果，请确保您在发起调用之前，已经完善全局配置。</div>
                        <div>
                            <Button type="primary" @click="runApi">发起调用</Button>
                        </div>
                    </div>
                    <div class="uploading" v-show="resultState === 'uploading'">
                        <div class="title">文件上传中......</div>
                        <Progress :percent="percent" />
                    </div>
                    <div class="loading" v-show="resultState === 'loading'">
                        <Spin />
                    </div>
                </div>
                <div class="document" v-show="rightTab === 'document'">
                    <div class="document-official" v-if="this.selectedApi.document != ''">
                        <a :href="this.selectedApi.document" target="_blank">
                            <Icon class="ion-document"></Icon>
                            官方文档
                        </a>
                    </div>
                    <div class="document-req">请求参数</div>
                    <Table :data="selectedApi.params" check-type="none" style="width: 100%">
                        <TableColumn key="name" title="参数名称" width="26%">
                        </TableColumn>
                        <TableColumn key="type" title="类型" width="20%">
                        </TableColumn>
                        <TableColumn key="text" title="必填" width="20%">
                        </TableColumn>
                        <TableColumn key="describe" title="描述" width="34%">
                        </TableColumn>
                    </Table>
                </div>
                <div class="record" v-show="rightTab === 'record'">
                    <div class="record-tip">调用记录仅临时保留，刷新或关闭页面后消失</div>
                    <Table :data="recordPageList" checkType="none" style="width: 100%">
                        <TableColumn key="time" title="调用时间" width="28%">
                        </TableColumn>
                        <TableColumn key="name" title="接口名" width="32%">
                        </TableColumn>
                        <TableColumn key="code" title="状态码" width="15%">
                        </TableColumn>
                        <TableColumn key="message" title="调用信息" width="25%">
                        </TableColumn>
                    </Table>
                    <Pagination :total="recordList.length" :current="currentPage" :limit="limitPage" :limits="[10]"
                        @change="changePage" />
                </div>
            </div>
        </div>
        <Dialog v-model="showConfigDialog" title="全局配置" :hideFooter="true" ref="configDialog">
            <div class="config-tip">
                <span>请确保您在发起调用之前已经完善全局配置，该配置全局生效</span>
            </div>
            <Form :starOnRequired="true" ref="configForm" layout="vertical">
                <FormItem label="bucket" :value="configForm.bucket" :rules="{required: true}">
                    <Tooltip content="bucket的名称">
                        <Input v-model="configForm.bucket"></Input>
                    </Tooltip>
                </FormItem>
                <FormItem label="region" :value="configForm.region" :rules="{required: true}">
                    <Tooltip content="region的名称">
                        <Input v-model="configForm.region"></Input>
                    </Tooltip>
                </FormItem>
                <FormItem label="AK" :value="configForm.AK" :rules="{required: true}">
                    <Tooltip content="您的AccessKeyId">
                        <Input v-model="configForm.AK"></Input>
                    </Tooltip>
                </FormItem>
                <FormItem label="SK" :value="configForm.SK" :rules="{required: true}">
                    <Tooltip content="您的SecretAccessKey">
                        <Input v-model="configForm.SK"></Input>
                    </Tooltip>
                </FormItem>
                <FormItem label="securityToken" :value="configForm.securityToken" :rules="{required: false}">
                    <Tooltip content="您的securityToken">
                        <Input v-model="configForm.securityToken"></Input>
                    </Tooltip>
                </FormItem>
            </Form>
            <template slot="footer">
                <Button type="primary" @click="submitConfig">保存</Button>
                <Button @click="$refs.configDialog.close()" class="config-reset-btn">取消</Button>
            </template>
        </Dialog>
    </div>
</template>
<script>
import Layout from './layout';
export default Layout;
</script>
<style>
@import '../css/index.css';
</style>